<template>
  <div class="box-x">
    <van-nav-bar title="我的" />
    <div class="nav">
      <div class="dengl" @click="isshow ? '' : dl()">
        <div class="mypt">
          <div
            class="pt1"
            :style="`background-image: url(${
              isshow
                ? img
                : 'https://qz.faisys.com/image/head.png?v=201801221411'
            });`"
          ></div>
        </div>
        <div class="dl">{{ isshow ? userinfo.username : "请点击登录" }}</div>
      </div>
    </div>
    <div class="body">
      <div class="bodyy">
        <div class="txt1">
          <div class="ttop">
            <van-cell is-link @click="$router.push('/order')" class="dd"
              >所有订单</van-cell
            >
            <!-- <van-popup v-model="show">内容</van-popup> -->
            <van-grid>
              <van-grid-item icon="shopping-cart" text="待支付" />
              <van-grid-item icon="clock" text="进行中" />
              <van-grid-item icon="checked" text="已完成" />
              <van-grid-item icon="clear" text="已取消" />
            </van-grid>
          </div>
        </div>
        <div class="txt2">
          <div class="mtop">
            <van-cell title="最新消息" is-link @click="$router.push('/news')" />
            <van-cell
              title="我的订阅"
              is-link
              @click="$router.push('/dingyue')"
            />
            <van-cell title="我的表单" is-link @click="$router.push('/form')" />
          </div>
        </div>
        <div class="txt3">
          <div class="btop">
            <van-cell
              title="湖北省武汉市"
              icon="location"
              @click="$router.push('/mapa')"
            >
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="arrow" class="arrow" />
              </template>
            </van-cell>
            <van-cell title="17671644587" icon="phone">
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="arrow" class="arrow" />
              </template>
            </van-cell>
            <van-cell title="10:00-22:00" icon="clock" />
            <van-cell title="这是家装家居的预约类模板" icon="wap-home" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      show: 0, //登录状态
      img: "https://img2.baidu.com/it/u=2188931746,2615018001&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", //登录头像
      userinfo: "",
    };
  },
  methods: {
    dl() {
      this.$router.push("/login");
    },
    isshow() {
      let res = JSON.parse(sessionStorage.getItem("userInfo"));
      if (res) {
        this.userinfo = res;
        this.show = 1;
        console.log(this.show);
      }
    },
  },
  mounted() {
    this.isshow();
  },
};
</script>

<style>
.box-x {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
.nav {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.dengl {
  width: 120%;
  height: 160px;
  background: #6e6a62;
  border-bottom-left-radius: 45%;
  border-bottom-right-radius: 45%;
  left: -10%;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.mypt {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: cornsilk;
  margin: 40px auto 10px;
  overflow: hidden;
  border: 2px solid #c4881a;
}
.pt1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: no-repeat center/100%;
}
.dl {
  color: #ffffff;
  font-size: 14px;
}
.body {
  width: 375px;
  height: 550px;
  margin: 0 0 -35px 0;
  position: relative;
  top: -35px;
}
.bodyy {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.txt1 {
  width: 320px;
  height: 114.5px;
  margin: 20px auto 10px;
}
.ttop {
  width: 300px;
  height: 100%;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.dd {
  border-bottom: 1px solid #eeeeee;
}
.van-grid-item__content {
  padding: 8px;
}
[class*="van-hairline"]::after {
  border: none;
}
.van-grid .van-icon:before {
  color: #f5b43e;
}
.txt2 {
  width: 320px;
  height: 134px;
  margin: 0 auto 10px;
  padding: 0 15px;
}
.mtop {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
  margin: 20px auto;
}
.txt3 {
  width: 320px;
  height: 170px;
  margin: 0 auto 10px;
  padding: 0 15px;
}
.btop {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #ffffff;
  overflow: hidden;
  margin: 20px auto;
}
.van-cell > i {
  color: #e5e5e5;
}
.van-cell::after {
  border: none;
}
</style>